<!-- eui-tab组件 -->
<template>
	<view class="rds-tabs" :class="{ 'tabs-fixed': fixed }">
		<scroll-view v-if="tabs.length" :id="viewId" :scroll-left="scrollLeft" scroll-x scroll-with-animation
			:scroll-animation-duration="240">
			<view class="tabs-item" :style="tabStyle">
				<!-- tab -->
				<view class="tab-item" v-for="(tab, i) in tabs" :class="{ 'active': value === i }" :key="i">
					<view class="corner">
						<view class="tabs-flex">
							<view @click.stop="tabClick(i)">
								{{ tab.name }}
							</view>
							<view v-if="value === i" class="selectdLine"></view>
						</view>
						<view :style="{marginLeft:'4px'}" @click="iconsClick">
							<eui-uicons size='24' fontFamily="enjoyIcon5" :customPrefix="tab.icon" color="#ffffff" />
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch, defineEmits, onMounted } from 'vue';

	const emit = defineEmits(["iconClick", "input", "change"]);
	const props = defineProps < {
		tabs: { // 支持格式: ['全部', '待付款'] 或 [{name:'全部'}, {name:'待付款'}]
			type: []
		};
		nameKey?: { // 取name的字段
			type: string;
			default: 'name'
		};
		spaceLeft: { // 取name的字段
			type: [string, number];
			default: 0
		};
		value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
			type: [string, number];
			default: 0
		};
		fixed: boolean; // 是否悬浮,默认false
		tabWidth: number; // 每个tab的宽度,默认不设置值,为flex平均分配; 如果指定宽度,则不使用flex,每个tab居左,超过则水平滑动(单位默认rpx)
		top: { // 顶部偏移的距离,默认单位rpx (当fixed=true时,已加上windowTop)
			type: number;
			default: 0
		};
		tabStyle: {
			type: object;
			default: {}
		}
	} > ();

	const viewId = ref('id_' + Math.random().toString(36).substr(2, 16));
	const scrollLeft = ref(0);
	const windowWidth = ref(0);
	const windowTop = ref(0);
	const warpWidth = ref(null);
	const tabWidthPx = ref(0);
	const scrollTimer = ref(null);
	watch(
		() => props,
		(newData) => {
			warpWidth.value = null; // 重新计算容器宽度
			scrollCenter(); // 水平滚动到中间

		}, {

	},
	)
	onMounted(() => {
		let sys = uni.getSystemInfoSync();
		windowWidth.value = sys.windowWidth
		windowTop.value = sys.windowTop;
		scrollCenter();
	});
	const tabClick = (i) => {
		if (props.value != i) {
			emit("input", i);
			emit("change", i);
		}
	}

	const scrollCenter = async () => {
		// if (!isScroll) return;
		if (!warpWidth.value) { // tabs容器的宽度
			let rect = await initWarpRect()
			warpWidth.value = rect ? rect.width : windowWidth.value; // 某些情况下取不到宽度,暂时取屏幕宽度
		}
		let tabLeft = tabWidthPx.value * props.value + tabWidthPx.value / 2; // 当前tab中心点到左边的距离
		let diff = tabLeft - warpWidth.value / 2 // 如果超过tabs容器的一半,则滚动差值
		scrollLeft.value = diff;
		// #ifdef MP-TOUTIAO
		scrollTimer.value && clearTimeout(scrollTimer.value)
		scrollTimer.value = setTimeout(() => { // 字节跳动小程序,需延时再次设置scrollLeft,否则tab切换跨度较大时不生效
			scrollLeft.value = Math.ceil(diff)
		}, 400)
		// #endif
	}
	const initWarpRect = async () => {
		return new Promise(resolve => {
			setTimeout(() => { // 延时确保dom已渲染, 不使用$nextclick
				let query = uni.createSelectorQuery();
				// #ifndef MP-ALIPAY
				query = query.in(this) // 支付宝小程序不支持in(this),而字节跳动小程序必须写in(this), 否则都取不到值
				// #endif
				query.select('#' + viewId.value).boundingClientRect(data => {
					resolve(data)
				}).exec();
			}, 20)
		})
	}
	const iconsClick = (e) => {
		emit('iconClick', e);
		e.stopPropagation();
	}
</script>

<style lang="scss">
	@import '../../../../static/font/enjoyicon5.0/iconfont.css';

	.rds-tabs {
		position: relative;
		font-size: 26rpx;
		box-sizing: border-box;
		overflow-y: hidden;
		height: 88rpx;
		border-radius: 20rpx;
		color: rgba(255, 255, 255, 0.6);

		&.tabs-fixed {
			z-index: 990;
			position: fixed;
			left: 0;
			width: 100%;
		}

		.tabs-item {
			position: relative;
			white-space: nowrap;
			//padding-bottom: 10px; // 撑开高度,再配合cc-tabs的overflow-y: hidden,以达到隐藏滚动条的目的
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tab-item {
				position: relative;
				text-align: center;
				box-sizing: border-box;
				padding: 0px 10px;
				color: #FFFFFF;
				margin-left: 12px;
				font-size: 26rpx;
				line-height: 88rpx;
				height:88rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				// flex: 1;

				&.active {
					font-size: 30rpx;
					line-height: 88rpx;
					color: #FFFFFF;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}

		// 平分的方式显示item
		.tabs-flex {
			position: relative;
			display: flex;
			justify-content: center;

			.tab-item {
				flex: 1;
			}
		}

		// 展开菜单 固定定位
		.fixed-box {
			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			width: 40px;
			text-align: center;
			align-content: center;
			background: #ffffff;
			z-index: 99;
			box-shadow: 0px 1px 5px 0px #CCCCCC;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
		}
	}

	.selectdLine {
		background-color: #FFFFFF;
		height: 6rpx;
		width: 50%;
		border-radius: 4rpx;
		position: absolute;
		bottom: 4rpx;
		margin-bottom: 6rpx;
	}

	.corner {
		display: flex;
		align-items: inherit
	}
	.placeholder {
		width: 40px !important;
		color: #fff !important;
		box-sizing: border-box !important;
		margin-left: 0 !important;
	}
</style>
